/* 整个页面的基本字体设置 */
body {
  font-family: Arial, sans-serif; /* 使用Arial字体，如果没有则使用系统默认的无衬线字体 */
  margin: 0; /* 移除默认的外边距 */
  padding: 0; /* 移除默认的内边距 */
}

/* 头部区域的样式 */
header {
  background-color: #fefbfb; /* 浅灰色背景 */
  color: rgb(12, 12, 12); /* 文字颜色为深灰色 */
  padding: 1rem; /* 内边距为1rem */
  display: flex; /* 使用弹性盒子布局 */
  justify-content: space-between; /* 子元素分散对齐 */
  align-items: center; /* 垂直居中对齐 */
}

/* 导航栏无序列表的样式 */
nav ul {
  list-style-type: none; /* 移除列表项的默认标记 */
  margin: 0; /* 移除默认的外边距 */
  padding: 0; /* 移除默认的内边距 */
  display: flex; /* 使用弹性盒子布局 */
}

/* 导航栏列表项的样式 */
nav ul li {
  margin-right: 1rem; /* 右边距为1rem */
}

/* 导航栏链接的样式 */
nav ul li a {
  color: rgb(16, 16, 16); /* 文字颜色为深灰色 */
  text-decoration: none; /* 移除下划线 */
}

/* 英雄区域的样式 */
.hero {
  text-align: center; /* 文本居中对齐 */
  padding: 2rem; /* 内边距为2rem */
  display: flex; /* 使用弹性盒子布局 */
  justify-content: space-between; /* 子元素分散对齐 */
  align-items: center; /* 垂直居中对齐 */
}

/* 内容区域的样式 */
.content {
  flex: 1; /* 弹性增长因子为1 */
  text-align: left; /* 文本左对齐 */
}

/* 图片区域的样式 */
.image {
  flex: 1; /* 弹性增长因子为1 */
}

/* 图片的样式 */
.image img {
  max-width: 100%; /* 最大宽度为100% */
  height: auto; /* 高度自适应 */
}

/* 行动号召区域的样式 */
.cta {
  text-align: center; /* 文本居中对齐 */
  margin-top: 10rem; /* 上边距为10rem */
  color: #f8f1f1; /* 文字颜色为浅灰色 */
  background-color: #4a98e1; /* 蓝色背景 */
  width: 100%; /* 宽度铺满整个界面 */
  height: 80px; /* 条的高度 */
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 行动号召区域链接的样式 */
.cta a {
  background-color: #ffbb00; /* 黄色背景 */
  color: #141313; /* 文字颜色为深灰色 */
  padding: 0.5rem 1rem; /* 内边距为0.5rem和1rem */
  text-decoration: none; /* 移除下划线 */
  border-radius: 5px; /* 边框圆角为5px */
}

/* 低高度图片的样式 */
.low-height-image {
  width: 100%; /* 图片宽度铺满整个容器 */
  height: 15px; /* 设置图片高度 */
  object-fit: cover; /* 保持图片比例，裁剪超出部分 */
}